<template>
    <div class="page">
        <div class="row">
            <h1 style="text-align:center;padding:2mm;margin-bottom: 0px;">欢迎光临</h1>
            <h2 style="text-align:center;margin-top: 0px;">{{sinfo.name}}</h2>
        </div>
        <div class="row">
            <p>客户姓名：{{oinfo.name}}</p>
            <p>客户卡号：{{oinfo.vipcard}}</p>
            <p>充值余额剩余：{{oinfo.yue}}元 </p>
            <p>赠送余额剩余：{{oinfo.zsyue}}元 </p>
            <p>&nbsp;&nbsp;</p>
            <p>单号：{{oinfo.order_sn}} </p>
        </div>
        <div v-show="putong.length > 0">
            <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
            <div class="row">
                <h3 style="text-align:center;margin:5px 0px">普通消费</h3>
                <table>
                    <thead>
                        <tr>
                            <th style="width:25mm">名称</th>
                            <!-- <th style="width:10mm">价格</th> -->
                            <th style="width:8mm">数量</th>
                            <th style="width:8mm">其他</th>
                            <th style="width:15mm">总金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(opt,key) in putong">
                            <td>{{opt.typename}}</td>
                            <!-- <td>{{opt.price}}</td> -->
                            <td>{{opt.num}}</td>
                            <td>
                                <span v-show="opt.istemp == 1">存</span>
                                <span v-show="opt.isgift == 1">送</span>
                            </td>
                            <td>{{opt.amount}}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>小计</td>
                            <td>{{counts.putong.num}}</td>
                            <td></td>
                            <td>{{counts.putong.amount}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div v-show="kahao.length > 0">
            <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
            <div class="row">
                <h3 style="text-align:center;margin:5px 0px">卡耗消费</h3>
                <table>
                    <thead>
                        <tr>
                            <th style="width:29mm">名称</th>
                            <!-- <th style="width:10mm">价格</th> -->
                            <th style="width:7mm">数量</th>
                            <th style="width:8mm">剩余</th>
                            <th style="width:12mm">到期</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(opt,key) in kahao">
                            <td>{{opt.typename}}</td>
                            <!-- <td>{{opt.price}}</td> -->
                            <td>{{opt.num}}</td>
                            <td>{{opt.cardtype == 1 ? '' : opt.nownum}}</td>
                            <td v-if="opt.cardtype == 1">{{opt.endtime|dateTime}}</td>
                            <td v-else></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>小计</td>
                            <td>{{counts.kahao.num}}</td>
                            <!-- <td>{{counts.kahao.amount}}</td> -->
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div v-show="zancun.length > 0">
            <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
            <div class="row">
                <h3 style="text-align:center;margin:5px 0px">暂存消费</h3>
                <table>
                    <thead>
                        <tr>
                            <th style="width:29mm">名称</th>
                            <!-- <th style="width:10mm">价格</th> -->
                            <th style="width:10mm">数量</th>
                            <!-- <th style="width:17mm">总金额</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(opt,key) in zancun">
                            <td>{{opt.typename}}</td>
                            <!-- <td>{{opt.price}}</td> -->
                            <td>{{opt.num}}</td>
                            <!-- <td>{{opt.amount}}</td> -->
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>小计</td>
                            <td>{{counts.zancun.num}}</td>
                            <!-- <td>{{counts.zancun.amount}}</td> -->
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>实收现金：{{oinfo.recemoney}}元</p>
            <p>充值余额支付：{{oinfo.usebalance}}元</p>
            <p>赠送余额支付：{{oinfo.usegiftbalance}}元</p>
            <!-- <p>卡耗：{{oinfo.cardreduce}}元</p> -->
            <p>&nbsp;&nbsp;</p>
            <p>下单时间：{{oinfo.addtime|hourTime}}</p>
            <p>打印时间：{{new Date()/1000|hourTime}}</p>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>电话：{{sinfo.phone}}</p>
            <p>地址：{{sinfo.address}}</p>
            <p>&nbsp;&nbsp;</p>
            <p style="text-align:center">欢迎光临！谢谢惠顾 </p>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'printOpenCard',
    data() {
        return {
            oinfo: {},
            cinfo: [],
            sinfo: {},
            zancun: [],
            kahao: [],
            putong: [],
            id: ''
        }
    },
    methods: {
        async getmsg() {
            let res = await C.ajax('/shop/print/getorderlistinfo', { 'id': this.id }, 'post')
            if (res) {
                this.oinfo = res.oinfo
                this.cinfo = res.olist
                this.sinfo = res.sinfo

                res.olist.forEach((row) => {
                    if (row.consumetype == 1) {
                        this.putong.push(row)
                    } else if (row.consumetype == 2) {
                        this.kahao.push(row)
                    } else {
                        this.zancun.push(row)
                    }
                })
            }
        },
        contextMenu() {
            const ipc = require('electron').ipcRenderer
            const { remote } = require('electron')
            const { Menu, MenuItem } = remote
            const menu = new Menu()
            menu.append(new MenuItem({ label: '直接打印', click() { ipc.send('print-now') } }))
            menu.append(new MenuItem({ type: 'separator' }))
            menu.append(new MenuItem({ label: '打印预览', click() { ipc.send('print-to-pdf') } }))
            window.addEventListener('contextmenu', (e) => {
                e.preventDefault()
                menu.popup(remote.getCurrentWindow())
            }, false)
        }
    },
    computed: {
        counts: function() {
            var d = {
                kahao: { num: 0, amount: 0 },
                zancun: { num: 0, amount: 0 },
                putong: { num: 0, amount: 0 }
            }

            this.putong.forEach((row) => {
                d.putong.num += row.num
                d.putong.amount += row.amount
            })
            this.zancun.forEach((row) => {
                d.zancun.num += row.num
                d.zancun.amount += row.amount
            })
            this.kahao.forEach((row) => {
                d.kahao.num += row.num
                d.kahao.amount += row.amount
            })

            return d
        }
    },
    mounted: function() {
        this.id = C.getDatas().id
        this.getmsg()
        this.contextMenu()
    }
}
</script>
<style>
body {
    width: 58mm;
    margin: 0mm auto;
    padding: 0;
    background-color: #FAFAFA;
    font: 3mm "Arial";
}

p {
    margin: 0px;
}

* {
    box-sizing: border-box;
}

.row {
    padding: 0px 1mm;
}

.page {
    width: 58mm;
    min-height: 210mm;
    border-radius: 5px;
    background: white;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/
    color: #000;
    margin: auto;
}

.content {
    border: none;
}

@page {
    size: 58mm auto;
    margin: 0;
}

@media print {
    html,
    body {
        width: 48mm;
        height: auto;
        margin: 0;
        padding: 0;
        background: white;
    }
    .page {
        padding: 0;
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: transparent;
        page-break-after: always;
    }
}

th {
    text-align: left;
}

[v-cloak] {
    display: none;
}
</style>